<template>
	<view class="rv-infomation-item">
		
		<!-- 消息头部 -->
		<view  class="info-head">
			<view class="sender-head">
				<image :src="info.senderInfo.senderHeaderSrc?'../../static/img/infomation/head/'+info.senderInfo.senderHeaderSrc:'../../static/img/icon/tabBar/mine.png'" mode="scaleToFill"></image>
			</view>
			<view class="sender-detail">
				<view class="sender-name">
					{{info.senderInfo.senderName}}
				</view>
				<view class="sender-time">
					{{info.senderInfo.senderTime}} 发布
				</view>
			</view>
			<view class="sender-attention-button">
				
				<view class="sender-remove-attention" v-if="info.isAttention">
					 已关注
				</view>
				<view class="sender-add-attention" v-else>
					+ 关注
				</view>
			</view>
		</view>
		
		<!-- 消息主体 -->
		<view class="info-main">
			<view class="info-text">
				<text class="info-text-main">
					<text class="info-essence-label"  v-if="info.isEssence">精华</text>
					{{info.detail.content}}
					</text>
			</view>
			<view class="info-more">
				查看详情 >
			</view>
			<view class="info-img-list">
				<view class="info-img" v-for="(item,index) in info.detail.srcList" :key="item">
					<image :src="'../../static/img/infomation/'+item" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info-view">
				<uni-icons type="eye" color="#909399" size="12px"></uni-icons>
				<text>{{info.detail.view}}</text>人浏览
			</view>
		</view>
		
		<!-- 消息底部 -->
		<view class="info-footer">
			<view class="info-button">
				<view class="info-button-praise">
					<uni-icons type="hand-up" color="#909399" size="16px"></uni-icons>
					{{info.data.praise||0}}
				</view>
				<view class="info-button-comment">
					<uni-icons type="chat" color="#909399" size="16px"></uni-icons>
					{{info.data.comment||0}}
				</view>
				<view class="info-button-share">
					<uni-icons type="redo" color="#909399" size="16px"></uni-icons>
					{{info.data.share||0}}
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		options: {
		    addGlobalClass: true
		},
		name:"rvInfomation",
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.rv-infomation-item{
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		padding: 0 10px;
		background-color: #fff;
		box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
		
		// 消息头部
		.info-head{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10px 0;
			position: relative;
			
			// 发送者头像
			.sender-head{
				width: 50px;
				height: 50px;
				border-radius: 40px;
				overflow: hidden;
				margin-right: 10px;
				background-color: #f2f2f2;
				
				image{
					width: 50px;
					height: 50px;
				}
			}
			// 发送者详细信息
			 .sender-detail{
				 // 用户名
				 .sender-name{
					 font-size: 15px;
				 }
				 // 发送时间
				 .sender-time{
					 font-size: 12px;
					 color: #909399;
				 }
			 }
			 
			 // 关注按钮
			 .sender-attention-button{
				 position: absolute;
				 right: 10px;
				 
				 >view{
					 padding: 3px 10px;
					 border-radius: 100px;
					 font-size: 13px;
					 color: white;
					 background-color: rgba($color: #ec3525, $alpha: 0.8);
				 }
			 }
		}
		
		//消息主题
		 .info-main{
			 display: flex;
			 flex-direction: column;
			 
			 // 内容板块
			 .info-text{
				 width: 100%;
				 
				 // 精华标签
				 .info-essence-label{
					 margin-left: 5px;
					 padding: 2px 3px;
					 font-size: 10px;
					 color: white;
					 background: linear-gradient(to right,#ff4e2f,#f39b40);
					 border-radius: 3px;
				 }
				 // 正文内容
				 .info-text-main{
					 
					 // 两行显示
					 overflow: hidden;
					 text-overflow: ellipsis;
					 display: -webkit-box;
					 -webkit-line-clamp:2;
					 -webkit-box-orient:vertical;
				 }
			 }
			 
			 // 查看更多
			 .info-more{
				 padding-right: 5px;
			 	align-self: flex-end;
				font-size: 12px;
				color: #909399;
			 }
			 
			 // 图片列表
			 .info-img-list{
				 display: flex;
				 flex-direction: row;
				 flex-wrap: nowrap;
				 width: 100%;
				 overflow: hidden;
				 overflow-x: auto;
				 margin: 5px 0;
				 
				 .info-img{
					 width: 80px;
					 height: 80px;
					 margin-right:10px;
					 border-radius: 5px;
					 overflow: hidden;
					 image{
						 width: 80px;
						 height: 80px;
					 }
				 }
			 }
			 
			 // 浏览量
			 .info-view{
				 font-size: 12px;
				 color: #909399;
				 margin-right: 5px;
				 align-self: flex-end;
			 }
		 }
		 
		 // 消息底部
		 .info-footer{
			 margin-top: 5px;
			 border-top: 1px solid rgba(0, 0, 0, 0.08);
			 
			 .info-button{
				 padding: 5px;
				 display: flex;
				 flex-direction: row;
				 justify-content: space-around;
				 color: #909399;
				 
				 >view{
					 width: 80px;
					text-align: center;
				 }
			 }
			 
		 }
	}
</style>
